<template>
	<view class="container">
		<view class="tab" :style="swiperHinget">
			<view 
				:class="{item,on:item.nottType==type}"  
				v-for="item in tabList" 
				:key="item.nottType"
				@click="onTabClick(item)"
			>
				{{item.nottName}} 
			</view>
		</view>
		 <scroll-view class="list" scroll-y :style="swiperHinget"  @scrolltolower="onLoadMore"> 
			 <view class="item-list new-list-item" v-for="item in list" @click="detalisClick(item.noticeID)" :key="item.noticeID">
			 	<view v-if="item.filesPath" class="new-img-wapper">
			 		<image :src="item.filesPrefix + item.filesPath" mode="aspectFill" />
			 	</view>
			 	<view class="new-item-desc">
			 		<view class="desc-title">{{item.noticeTitle}}</view>
			 		<view class="desc-time">{{item.noticeCD}}</view>
			 	</view>
			 </view>
			 <view class="on-data" v-if="onData">暂无{{type==1?'新闻':'公告'}}...</view>
			 <view class="on-more" v-if="onMore">没有更多了...</view>
		 </scroll-view>
	</view>
</template>

<script>
	import { noticeModule } from '../../../modules/notice.js';
	import util from "../../../utils/util.js"
	
	const Notice = new noticeModule()
	export default {
		data() {
			return {
				type: '',
				page:1,
				swiperHinget: '',
				tabList: [],
				nottID: '',
				list: [],
				onMore: false, // 是否没有更多数据
				onData: false  // 是否没有数据
			};
		}, 
		onLoad() {
			let Info = util.getSystemInfo() //获取设备信息
			this.swiperHinget = `height:${Info.windowHeight}px`;
			Notice.getNoticeType() // 公告类型列表
				.then((res)=>{
					this.type = res[0].nottType
					this.name = res[0].nottName
					this.tabList = res
					return Notice.getNotice(res[0].nottID, res[0].nottType , this.page)  // 请求数组第一项列表数据
				})
				.then((res)=>{ 
					this.validationData(res.length)  // 判断数组长度
					this.list = res
				})
		},
		methods: {
			Initialize() { // 初始化参数
				this.page = 1
				this.list = []
				this.onData = false
				this.onMore = false
			},
			onTabClick(item) { //切换 公告类型
				let { nottID, nottType, nottName } = item
				this.type = nottType
				this.nottID = nottID
				this.name = nottName
				this.Initialize() // 执行初始化参数
				this.getNotice(nottID,nottType,this.page)
			},
			
			getNotice(nottID,nottType,page) { // 请求列表数据方法
				Notice.getNotice(nottID,nottType,page)
					.then((res)=>{
						this.validationData(res.length) // 判断数组长度
						this.list = this.list.concat(res)
					})
			},
			
			onLoadMore(){ // 下拉执行方法  
				// TODO 此处未完 应该加入锁的概念 
				if(this.onMore){ // 没有更多 则下拉不执行
					return
				}
				this.page ++ // 每下拉一次，改变当前的页数 保证每次下拉都会加 1
				this.getNotice(this.nottID,this.type,this.page) 
			},
			
			detalisClick(noticeID) {
				uni.navigateTo({
					url: `/pages/notice/details/details?id=${noticeID}&type=${this.name}`
				})
			},
			
			validationData(length){ // 判断数组长度
				if(length == 0) {
					this.onData = true // 没有数据
				}else if(length < 10) {
					this.onMore = true // 没有更多
				}
			},
		}
	}
</script>

<style lang="scss">
	@import "../../../common/scss/common.scss";
	
	page{
		background-color: #F7F7F7;
	}
	.container{
		position: relative;
		.tab{
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			bottom: 0;
			background-color: #F7F7F7;
			// box-shadow: ws(1) 0 ws(3) rgba(#000,.3);
			width: ws(80);
			.item{
				text-align: center;
				line-height: ws(50);
				border-bottom: 1upx solid #eee;
				font-size: ws(16); 
			}
			.on {
				color: #2A83FF;
				position: relative; 
				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					margin: auto;
					width: ws(5);
					height: 50%;
					background-color: #2A83FF;
					border-radius: 0 ws(30) ws(30) 0 ; 
				}
			}
		}
		.list{
			position: relative;
			z-index: 1;
			box-sizing: border-box;
			background-color: #fff;
			padding-left: ws(80);
			.new-list-item {
				height: ws(100);
				display: flex;
				background-color: #fff;
				padding: 0 ws(15);
				border-bottom: 1upx solid #eee;
				align-items: center;
				&:last-child{
					border-bottom: none;
				}
				.new-item-desc {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: ws(70);
					padding: ws(5) 0; 
					view {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.desc-title {
						color: #000;
						-webkit-line-clamp: 2;
						font-size: ws(15);
						line-height: ws(21);
					}
					.desc-text {
						font-size: ws(14);
						color: #666666;
					}
					.desc-time {
						margin-top: ws(10);
						font-size: ws(12);
						color: #ABABAB;
					}
				}
			}
			.new-img-wapper {
				margin-right: ws(15);
				width: ws(70);
				height: ws(70);
				background: #eee;
				overflow: hidden;
				border-radius: ws(5);
				display: block;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.on-data {
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
		margin: auto;
		color: #999;
		font-size: 30upx;
		text-align: center;
	}
	.on-more {
		color: #999;
		font-size: 30upx;
		text-align: center;
		padding: 30upx 0;
	}
</style>
 